<template>
  <page-layout title="我的" :show-back="true">
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-header">
			<view class="user-cover" :style="{ backgroundImage: 'url(' + userInfo.coverImage + ')' }"></view>
			<view class="user-card">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="user-details">
						<view class="name-level">
							<text class="user-name">{{ userInfo.nickname }}</text>
						</view>
						<view class="user-id">ID: {{ userInfo.userId }}</view>
						<view class="user-signature">{{ userInfo.signature || '这个人很懒，什么都没有留下' }}</view>
					</view>
				</view>
				
				<view class="action-btns">
					<button 
						class="follow-btn" 
						:class="{ 'followed': isFollowed }" 
						@tap="toggleFollow"
					>
						<text>{{ isFollowed ? '已关注' : '关注' }}</text>
					</button>
					<button class="message-btn" @tap="sendMessage">
						<uni-icons type="chat" size="24" color="#666666"></uni-icons>
					</button>
				</view>
				
				<!-- 统计信息 -->
				<view class="stat-bar">
					<view class="stat-item" @tap="goToFollowers">
						<text class="stat-num">{{ userInfo.followersCount }}</text>
						<text class="stat-label">粉丝</text>
					</view>
					<view class="stat-item" @tap="goToFollowing">
						<text class="stat-num">{{ userInfo.followingCount }}</text>
						<text class="stat-label">关注</text>
					</view>
					<view class="stat-item">
						<text class="stat-num">{{ userInfo.postsCount }}</text>
						<text class="stat-label">帖子</text>
					</view>
					<view class="stat-item">
						<text class="stat-num">{{ userInfo.likesCount }}</text>
						<text class="stat-label">获赞</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容区 -->
		<view class="content-area">
			<!-- 标签页 -->
			<view class="tabs">
				<view 
					class="tab-item" 
					v-for="(tab, index) in tabs" 
					:key="index"
					:class="{ active: currentTab === index }"
					@tap="switchTab(index)"
				>
					<text class="tab-text">{{ tab }}</text>
				</view>
				<view class="tab-line" :style="{ left: tabLineLeft + 'px' }"></view>
			</view>
			
			<!-- 内容区域 -->
			<swiper class="content-swiper" :current="currentTab" @change="swiperChange">
				<!-- 帖子列表 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="post-scroll" @scrolltolower="loadMorePosts">
						<view v-if="loading && posts.length === 0" class="loading-container">
							<view class="loading-spinner"></view>
							<text>加载中...</text>
						</view>
						
						<view v-else-if="posts.length === 0" class="empty-container">
							<image src="/static/empty.png" mode="aspectFit"></image>
							<text>该用户暂未发布任何内容</text>
						</view>
						
						<view v-else class="post-list">
							<view 
								class="post-item" 
								v-for="post in posts" 
								:key="post.id"
								@tap="viewPostDetail(post.id)"
							>
								<view class="post-content">
									<text class="post-title">{{ post.title }}</text>
									<text class="post-text">{{ post.content }}</text>
								</view>
								
								<view class="post-media" v-if="post.images && post.images.length">
									<view class="media-grid" :class="'grid-' + (post.images.length > 4 ? 'multi' : post.images.length)">
										<image 
											v-for="(img, imgIndex) in post.images.slice(0, 9)" 
											:key="imgIndex" 
											:src="img" 
											mode="aspectFill"
										></image>
										<view class="image-count" v-if="post.images.length > 9">+{{ post.images.length - 9 }}</view>
									</view>
								</view>
								
								<view class="post-footer">
									<text class="post-time">{{ post.createTime }}</text>
									<view class="post-stats">
										<view class="stat">
											<uni-icons type="heart" size="22" color="#999999"></uni-icons>
											<text>{{ post.likeCount }}</text>
										</view>
										<view class="stat">
											<uni-icons type="chatbubble" size="22" color="#999999"></uni-icons>
											<text>{{ post.commentCount }}</text>
										</view>
									</view>
								</view>
							</view>
							
							<view class="list-footer">
								<text v-if="hasMorePosts">加载中...</text>
								<text v-else>没有更多内容了</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
				<!-- 动态列表 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="post-scroll">
						<view class="empty-container">
							<image src="/static/empty.png" mode="aspectFit"></image>
							<text>该用户暂未发布任何动态</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
  </page-layout>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from "@/components/PageLayout.vue";

// 用户信息
const userInfo = reactive({
	userId: '1234567',
	nickname: '岚迹用户',
	avatar: '/static/avatar.jpg',
	coverImage: '/static/mock-image.jpg',
	signature: '热爱生活，记录生活点滴',
	followersCount: 256,
	followingCount: 128,
	postsCount: 42,
	likesCount: 1024
});

// 关注状态
const isFollowed = ref(false);

// 切换关注状态
const toggleFollow = () => {
	isFollowed.value = !isFollowed.value;
	
	if (isFollowed.value) {
		userInfo.followersCount++;
		uni.showToast({
			title: '已关注',
			icon: 'none'
		});
	} else {
		userInfo.followersCount--;
		uni.showToast({
			title: '已取消关注',
			icon: 'none'
		});
	}
};

// 发送私信
const sendMessage = () => {
	uni.navigateTo({
		url: `/pages/chat/conversation?userId=${userInfo.userId}&nickname=${userInfo.nickname}`
	});
};

// 查看更多操作
const showActionMenu = () => {
	uni.showActionSheet({
		itemList: ['分享', '举报'],
		success: function (res) {
			if (res.tapIndex === 0) {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '举报已提交',
					icon: 'none'
				});
			}
		}
	});
};

// 标签页
const tabs = ['帖子', '动态'];
const currentTab = ref(0);
const tabLineLeft = ref(30);

// 切换标签页
const switchTab = (index) => {
	currentTab.value = index;
	calcTabLinePosition();
};

// 轮播切换
const swiperChange = (e) => {
	currentTab.value = e.detail.current;
	calcTabLinePosition();
};

// 计算标签线位置
const calcTabLinePosition = () => {
	// 每个tab宽度是屏幕宽度的一半
	const tabWidth = uni.getSystemInfoSync().windowWidth / 2;
	tabLineLeft.value = tabWidth * currentTab.value + tabWidth / 2 - 15;
};

// 帖子列表
const posts = ref([]);
const loading = ref(true);
const hasMorePosts = ref(true);
const page = ref(1);

// 加载帖子
const loadMorePosts = () => {
	if (!hasMorePosts.value || loading.value) return;
	
	loading.value = true;
	
	// 模拟请求延迟
	setTimeout(() => {
		const newPosts = Array(5).fill(0).map((_, index) => {
			const id = posts.value.length + index + 1;
			const imageCount = Math.floor(Math.random() * 5);
			const images = imageCount ? Array(imageCount).fill('/static/mock-image.jpg') : [];
			
			return {
				id: id,
				title: '岚迹社区的第' + id + '个话题',
				content: '这是帖子内容，记录生活点滴。岚迹社区是记录和分享生活的地方，希望大家喜欢。',
				createTime: Math.floor(Math.random() * 7) + '天前',
				images: images,
				likeCount: Math.floor(Math.random() * 200),
				commentCount: Math.floor(Math.random() * 50)
			};
		});
		
		posts.value = [...posts.value, ...newPosts];
		loading.value = false;
		
		// 模拟没有更多数据
		if (page.value >= 3) {
			hasMorePosts.value = false;
		} else {
			page.value += 1;
		}
	}, 1000);
};

// 查看帖子详情
const viewPostDetail = (postId) => {
	uni.navigateTo({
		url: `/pages/post/detail?id=${postId}`
	});
};

// 跳转到粉丝列表
const goToFollowers = () => {
	uni.navigateTo({
		url: `/pages/user/followers?userId=${userInfo.userId}`
	});
};

// 跳转到关注列表
const goToFollowing = () => {
	uni.navigateTo({
		url: `/pages/user/following?userId=${userInfo.userId}`
	});
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 页面加载
onMounted(() => {
	// 获取路由参数
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const userId = currentPage.options?.id;
	
	if (userId) {
		// 这里可以根据userId请求用户数据
		console.log('加载用户ID:', userId);
	}
	
	// 初始化标签线位置
	calcTabLinePosition();
	
	// 加载帖子数据
	loadMorePosts();
});
</script>

<style lang="scss">
page {
	background-color: #f5f7fa;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* 用户信息卡片 */
.user-header {
	position: relative;
}

.user-cover {
	height: 300rpx;
	background-size: cover;
	background-position: center;
	position: relative;
	
	&:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 150rpx;
		background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
	}
}

.user-card {
	margin: -80rpx 30rpx 30rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	padding: 30rpx;
	position: relative;
	z-index: 1;
}

.user-info {
	display: flex;
	margin-bottom: 30rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid #fff;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	margin-right: 30rpx;
}

.user-details {
	flex: 1;
}

.name-level {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.user-name {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
	margin-right: 16rpx;
}

.user-id {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 16rpx;
}

.user-signature {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
}

.action-btns {
	display: flex;
	margin-bottom: 30rpx;
}

.follow-btn,
.message-btn {
	height: 70rpx;
	border-radius: 35rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	margin: 0;
	padding: 0;
}

.follow-btn {
	flex: 1;
	background: linear-gradient(135deg, #6e8efb, #a777e3);
	color: #fff;
	margin-right: 20rpx;
	
	&.followed {
		background: #f0f2f5;
		color: #666;
	}
}

.message-btn {
	width: 70rpx;
	background: #f0f2f5;
	
	.iconfont {
		font-size: 36rpx;
		color: #666;
	}
}

.stat-bar {
	display: flex;
	background: #f8f9fc;
	border-radius: 12rpx;
	padding: 20rpx 0;
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	
	&:after {
		content: '';
		position: absolute;
		right: 0;
		top: 20%;
		bottom: 20%;
		width: 1rpx;
		background: #ebedf0;
	}
	
	&:last-child:after {
		display: none;
	}
}

.stat-num {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
}

/* 内容区域 */
.content-area {
	flex: 1;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	margin: 0 30rpx;
}

.tabs {
	display: flex;
	position: relative;
	background: #fff;
	height: 100rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s;
}

.tab-item.active .tab-text {
	color: #6e8efb;
	font-weight: 500;
}

.tab-line {
	position: absolute;
	bottom: 0;
	width: 30rpx;
	height: 6rpx;
	background: #6e8efb;
	border-radius: 3rpx;
	transition: all 0.3s;
}

.content-swiper {
	height: calc(100vh - 520rpx);
}

.post-scroll {
	height: 100%;
}

.loading-container,
.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #6e8efb;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.empty-container image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-container text {
	font-size: 28rpx;
	color: #999;
}

/* 帖子列表 */
.post-list {
	padding: 30rpx;
}

.post-item {
	margin-bottom: 30rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.post-content {
	margin-bottom: 20rpx;
}

.post-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.post-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.post-media {
	margin-bottom: 20rpx;
}

.media-grid {
	display: grid;
	grid-gap: 6rpx;
	position: relative;
	
	&.grid-1 {
		grid-template-columns: 1fr;
		
		image {
			height: 360rpx;
			border-radius: 12rpx;
		}
	}
	
	&.grid-2 {
		grid-template-columns: 1fr 1fr;
		
		image {
			height: 260rpx;
			border-radius: 12rpx;
		}
	}
	
	&.grid-3 {
		grid-template-columns: 1fr 1fr 1fr;
		
		image {
			height: 200rpx;
			border-radius: 12rpx;
		}
	}
	
	&.grid-4 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		
		image {
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	
	&.grid-multi {
		grid-template-columns: 1fr 1fr 1fr;
		
		image {
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	
	.image-count {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
}

.post-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.post-time {
	font-size: 24rpx;
	color: #999;
}

.post-stats {
	display: flex;
}

.stat {
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
	
	.uni-icons {
		margin-right: 6rpx;
	}
}

.list-footer {
	text-align: center;
	padding: 30rpx 0;
	font-size: 26rpx;
	color: #999;
}
</style> 